<template>
  <div>
    <div id='formio'></div>
  </div>
</template>

<script setup lang="ts">
import { Formio } from 'formiojs';
import 'formiojs/dist/formio.form.min.css'
import { onMounted } from "vue";

onMounted(() => {
  const ele = document.getElementById('formio')
  if (ele) {
    Formio.createForm(ele, {
      components: [
        {
          type: 'textfield',
          key: 'firstName',
          label: 'First Name',
          placeholder: 'Enter your first name.',
          input: true,
          tooltip: 'Enter your <strong>First Name</strong>',
          description: 'Enter your <strong>First Name</strong>'
        },
        {
          type: 'button',
          action: 'submit',
          label: '提交',
          theme: 'primary'
        }
      ]
    }, {
      readOnly: false,
      renderMode: 'form'
    }).then(function (form) {
      form.nosubmit = true;
      // Defaults are provided as follows.
      form.submission = {
        data: {
          firstName: 'Joe',
        }
      };

      // Register for the submit event to get the completed submission.
      form.on('submit', function (submission: any) {
        console.log('Submission was made!', submission);
        form.emit('submitDone', submission)
      });

      // Everytime the form changes, this will fire.
      form.on('change', function (changed: any) {
        console.log('Form was changed', changed);
      });
    });
  }
})
</script>

<style scoped>
#formio {
  padding: 20px;
}
</style>